<template>
  <div class="page">
    <div class="content">
      <!-- 分类列表 -->
      <div class="food-catetory">
        <ul>
          <li
            :class="activityIndex == index ? 'activity' : ''"
            v-for="(catetoryItem, index) in foodCategory"
            :key="index"
          >
            {{ catetoryItem }}
          </li>
        </ul>
      </div>
      <!-- 食品列表 -->
      <div class="food-list">
        <div
          class="foodItem"
          v-for="catetoryItem in menuList"
          :key="catetoryItem.id"
        >
          <p class="food-catetory-name">
            <strong class="strong-name">{{ catetoryItem.name }}</strong>
            {{ catetoryItem.desciption ? catetoryItem.desciption : ""
            }}<span class="right-title">. . .</span>
          </p>
          <div
            class="food-item-detail"
            v-for="foodsitem in catetoryItem.foods"
            :key="foodsitem.item_id"
          >
            <img :src="foodsitem.image_path" alt="" />
            <div class="detail-right">
              <p class="common-details-jb detail-name-zp">
                <span class="detail-name">{{ foodsitem.name }}</span
                ><span
                  v-if="foodsitem.attributes.length > 0"
                  class="detail-radius radius-right"
                  >{{ `招牌` }}</span
                >
              </p>
              <p class="detail-subtitle">{{ foodsitem.description }}</p>
              <p class="detail-situation">
                月售{{ foodsitem.month_sales }}份 好评率{{
                  foodsitem.satisfy_rate
                }}%
              </p>
              <div class="outer-radius">
                <span
                  class="detail-radius radius-left"
                  v-if="foodsitem.activity"
                  >{{ foodsitem.activity["image_text"] }}</span
                >
              </div>

              <div
                class="common-details-jb detail-price"
                v-if="foodsitem.specifications.length > 0"
              >
                <span
                  ><i>￥{{ foodsitem.specfoods[0].price }}</i
                  >起</span
                >
                <div class="update-common">
                  <div
                    class="delete-sum"
                    v-if="currentShopNum(foodsitem.specfoods)"
                  >
                    <span class="detail-update iconfont icon-jianhao"></span>
                    <span class="detail-sum">{{
                      currentShopNum(foodsitem.specfoods)
                    }}</span>
                  </div>
                  <span
                    class="detail-specifications"
                    @click="selectShop(foodsitem)"
                  >
                    选规格</span
                  >
                </div>
              </div>
              <div class="common-details-jb detail-price" v-else>
                <span
                  ><i>￥{{ foodsitem.specfoods[0].price }}</i></span
                >
                <div class="update-common">
                  <div
                    class="delete-sum"
                    v-if="
                      foodsitem.specfoods[0].num &&
                      foodsitem.specfoods[0].num > 0
                    "
                  >
                    <span
                      class="detail-update iconfont icon-jianhao"
                      @click="updateShopNum(foodsitem)"
                    ></span>
                    <span class="detail-sum">{{
                      foodsitem.specfoods[0].num
                    }}</span>
                  </div>
                  <span
                    class="detail-add iconfont icon-jiahao"
                    @click="selectNum(foodsitem)"
                  ></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 选规格 -->
      <div v-if="showSpec">
        <el-dialog :visible.sync="selectShopVisible" center width="65vw">
          <div slot="title" class="shopName">
            <span>{{ this.shopfood.name }}</span>
          </div>
          <p class="specifications">规格</p>
          <div class="specfoods">
            <span
              v-for="(spec, index) in specfood"
              :class="{ 'specfood-activity': specActivityIndex === index }"
              @click="specActivityIndex = index"
              >{{ spec.specs_name }}</span
            >
          </div>
          <!-- <div class="">
          
        </div> -->
          <div slot="footer" class="specfoods-footer">
            <span class="foods-price"
              ><i>￥</i>{{ this.specfood[this.specActivityIndex].price }}</span
            >
            <div class="add-cart" @click="addCart()">
              <span>加入购物车</span>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { foodMenu } from "@/service/getData";
import { imgBaseUrl } from "@/config/env.js";

export default {
  data() {
    return {
      activityIndex: 0, //活动分类名
      foodCategory: [], //商家食品分类
      menuList: [], //商家食品列表
      selectShopVisible: false, // 选择规格
      shopfood: [], // 食品详情
      specfood: [], //食品规格列表
      specPrice: 0, // 当前规格价格
      specActivityIndex: 0, //当前选择规格
      showSpec: false, //刷新数据
      cartList: [], // 购物车列表
      cachePosition: [], // 缓存分类位置信息
    };
  },
  props: ["shopId", "foodNum"],
  // directives: {
  //   initPosition: {
  //     bind: function (el, binding) {
  //       let a = document.getElementsByClassName("foodItem");
  //       // console.log(a);
  //       a = [...a];
  //       a.forEach((item, index) => {
  //         this.cachePosition.push(item.offsetTop);
  //         console.log(item.offsetTop);
  //         console.log(item.offsetParent);
  //       }, this);
  //     },

  //   },
  // },
  created() {
    this.initData();
  },
  mounted() {
    this.$Bus.$on("clearCart", (cartList) => {
      console.log(cartList);
      this.getFoodList();
    });
    this.$nextTick(() => {
      let a = document.getElementsByClassName("foodItem");
      console.log(a);
      a = [...a];
      a.forEach((item, index) => {
        this.cachePosition.push(item.offsetTop);
        console.log(item.offsetTop);
        console.log(item.offsetParent);
      });
      console.log(this.cachePosition);
    });
  },
  watch: {
    "foodNum.food_id": {
      handler(newValue, oldValue) {
        this.updateFoodNum();
      },
    },
    "foodNum.num": {
      handler(newValue, oldValue) {
        this.updateFoodNum();
      },
    },
  },
  computed: {},
  methods: {
    async initData() {
      //获取商铺食品列表
      await this.getFoodList();
      this.foodCategory = this.menuList.map((item) => {
        return item.name;
      });

      console.log(this.foodCategory);
      console.log(this.menuList);
    },
    // 获取食品列表数据
    async getFoodList() {
      this.menuList = await foodMenu(this.shopId);
      this.$nextTick(function () {
        //   let copyMenuList = [...menuList];
        this.menuList.forEach(({ foods }) => {
          foods.forEach((item) => {
            let { image_path } = item;
            if (image_path) {
              item.image_path = imgBaseUrl + image_path;
              //   item.image_path = image_path.replaceAll(/^blob/g, "");
            }
          });
        });
      });
    },
    // 加号+
    selectNum(shop, targetIndex = 0) {
      this.setShopNum(shop, targetIndex);
    },
    // 添加单个商品的数量
    setShopNum(food, targetIndex = 0) {
      let { category_id, item_id } = food;
      let shopfood = this.findfood(category_id, item_id);
      let flat = shopfood.specfoods[targetIndex];
      if (!flat.num) {
        this.$set(shopfood.specfoods[targetIndex], "num", 1);
      } else {
        flat.num++;
      }
      let {
        food_id,
        item_id: itemId,
        name,
        num,
        price,
        pinyin_name,
      } = shopfood.specfoods[targetIndex];
      let cartList = {
        category_id,
        food_id,
        item_id: itemId,
        name,
        num,
        price,
        pinyin_name,
      };

      // let foodItem = this.cartList.find((value) => {
      //   return value["food_id"] == food_id;
      // });
      // if (foodItem) {
      //   foodItem.num = num;
      // } else {
      //   this.cartList.push({
      //     category_id,
      //     food_id,
      //     item_id: itemId,
      //     name,
      //     num,
      //     price,
      //     pinyin_name,
      //   });
      // }
      this.$emit("addCartList", cartList);
      // console.log({ food_id, itemId, name, num, price, pinyin_name });

      // console.log(this.cartList);
    },
    // 查找商品
    findfood(category_id, item_id) {
      return this.menuList
        .find((item) => {
          return item.id == category_id;
        })
        .foods.find((item) => {
          return item.item_id == item_id;
        });
    },
    // 修改单个商品的数量
    updateShopNum(food, targetIndex = 0) {
      let { category_id, item_id } = food;
      let shopfood = this.findfood(category_id, item_id);
      let specNum = --shopfood.specfoods[targetIndex].num;
      let {
        food_id,
        item_id: itemId,
        name,
        num,
        price,
        pinyin_name,
      } = shopfood.specfoods[targetIndex];
      if (specNum < 1) {
        this.$delete(shopfood.specfoods[targetIndex], "num");

        // let foodId = shopfood.specfoods[targetIndex]["food_id"];
        // let index = this.cartList.findIndex((value) => {
        //   return value["food_id"] == foodId;
        // });
        // this.cartList.splice(index, 1);
      }

      let cartList = {
        category_id,
        food_id,
        item_id: itemId,
        name,
        num,
        price,
        pinyin_name,
      };
      this.$emit("addCartList", cartList);
    },
    // 选规格对话框
    selectShop(shop) {
      this.specActivityIndex = 0;
      this.shopfood = shop;
      this.specfood = shop.specfoods;
      // console.log(this.specfood);
      this.showSpec = true;
      this.selectShopVisible = true;
    },
    // 选规格 -->  加入购物车
    addCart() {
      this.setShopNum(this.shopfood, this.specActivityIndex);
      this.selectShopVisible = false;
    },
    // 单个商品所有规格的总数
    currentShopNum(specfoods) {
      let sum = specfoods.reduce((pre, current) => {
        return current.num ? current.num + pre : pre;
      }, 0);
      if (sum > 0) {
        return sum;
      }
      return 0;
    },
    // 同步购物车与食品列表食品数量
    updateFoodNum() {
      if (this.foodNum["food_id"]) {
        let { category_id, food_id, item_id, num } = this.foodNum;
        let food = this.findfood(category_id, item_id);
        let specFood = food.specfoods.find((value) => {
          return value["food_id"] == food_id;
        });
        if (num < 1) {
          this.$delete(specFood, "num");
        } else {
          specFood.num = num;
        }
      }
    },
    // 分类跳转
    // toOtherCate(index) {
    //   let a = document.getElementsByClassName("foodItem");
    //   a[index].offsetTop = this.cachePosition[index];
    // },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../style/mixin";
.page {
  @include wh(100%, 100%);
}
.content {
  display: flex;
  overflow: hidden;
  padding-bottom: 2.2rem;
  .food-catetory {
    width: 4rem;
    overflow-x: hidden;
    overflow-y: auto;
    li {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      @include wh(100%, 2.8rem);
      @include sc(0.6rem, #666);

      border-bottom: 0.025rem solid #ededed;
      border-right: 0.025rem solid #ededed;
    }
    .activity {
      font-weight: 600;
      background: #fff;
    }
    .activity::after {
      content: "";
      @include wh(0.15rem, 100%);
      background-color: $blue;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .food-list {
    overflow-x: hidden;
    flex: 1;
    overflow-y: auto;

    .foodItem {
      .food-catetory-name {
        .strong-name {
          @include sc(0.7rem, #666);
        }
        height: 1.8rem;
        line-height: 1.8rem;
        @include sc(0.5rem, #999);
        padding-left: 0.4rem;
        position: relative;

        .right-title {
          @include ct;
          right: 0.2rem;
        }
      }
      .food-item-detail {
        display: flex;
        padding: 0.3rem;
        background-color: #fff;
        padding-bottom: 0.5rem;
        img {
          // 清除图片间隙
          vertical-align: middle;
          @include wh(2rem, 2rem);
        }
        .detail-right {
          flex: 1;
          margin-left: 0.3rem;
          p {
            margin-top: 0.2rem;
          }
          .common-details-jb {
            @include fj;
            // align-items: center;
            .update-common {
              display: flex;
              font-size: 0.7rem;
              align-items: center;

              .delete-sum {
                display: flex;
                align-items: center;
                margin-right: 0.6em;
                font-size: 0.7rem;
              }
            }
          }
          .detail-name-zp {
            margin-top: 0;
            .detail-name {
              @include sc(0.7rem, #333);
              font-weight: 600;
            }
            .radius-right {
              margin-right: -0.2rem;
            }
          }
          .detail-subtitle {
            @include sc(0.5rem, #999);
          }
          .detail-situation {
            @include sc(0.5rem, #333);
          }
          .outer-radius {
            display: flex;
            align-items: center;
            margin-top: 0.2rem;
            .radius-left {
              margin-left: -0.2rem;
              color: rgb(241, 136, 79);
            }
          }
          .detail-price {
            span {
              i {
                @include sc(0.7rem, #666);
                font-weight: 600;
              }
              @include sc(0.5rem, #f60);
            }
            .detail-add,
            .detail-update {
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 0.5rem;
              @include wh(0.7rem, 0.7rem);
              border-radius: 50%;
            }
            .detail-add {
              color: #fff;
              background-color: $blue;
              border: 1px solid $blue;
            }
            .detail-update {
              margin-right: 0.6em;
              color: $blue;
              background-color: #fff;
              border: 1px solid $blue;
            }
            .detail-sum {
              // font-size: 0.6rem;
              @include sc(0.6rem, #000);
            }
            .detail-specifications {
              white-space: nowrap;
              @include sc(0.55rem, #fff);
              padding: 0.1rem 0.2rem;
              background-color: $blue;
              border: 0.025rem solid $blue;
              border-radius: 0.2rem;
            }
          }
        }
      }
    }
  }
}
.detail-radius {
  display: inline-block;
  height: 0.7rem;
  border: 0.025rem solid rgb(240, 115, 115);
  border-radius: 0.4rem;
  @include sc(0.3rem, rgb(240, 115, 115));
  transform: scale(0.8);
  padding: 0 0.1rem;
}
.specifications {
  padding: 0.25rem 0.5rem 0.5rem;
  @include sc(0.6rem, #666);
}
.specfoods {
  // display: flex;
  // justify-content: center;
  // align-items: center;
  margin-bottom: 1rem;
  span {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    @include sc(0.6rem, #333);
  }
}
.specfoods .specfood-activity {
  color: $blue;
  border-color: $blue;
}
.shopName {
  @include sc(0.7rem, #222);
  padding: 0.5rem 0;
}
.specfoods-footer {
  display: flex;
  @include fj;
  align-items: center;
  .foods-price {
    @include sc(0.8rem, #ff6000);
    font-weight: 600;
    i {
      // vertical-align: bottom;
      @include sc(0.5rem, #ff6000);
    }
  }
  .add-cart {
    display: flex;
    @include wh(4rem, 1.3rem);
    justify-content: center;
    align-items: center;

    background: $blue;
    border-radius: 5px;
    // padding: 5px 15px;
    span {
      @include sc(0.6rem, #fff);
    }
  }
}
</style>
<style lang="scss">
.el-dialog__wrapper {
  // width: 65vw;
  // top: 50%;
  // left: 50%;
  // transform: translate(-50%, -50%);
}
.el-dialog__header {
  padding: 0;
}
.el-dialog__headerbtn {
  top: 0;
  right: 0;
  transform: t ranslate(-25%, 25%);
}
.el-dialog {
  top: 50%;
  left: 50%;
  margin: 0 !important;
  transform: translate(-50%, -50%);
}
.el-dialog__headerbtn .el-dialog__close {
  font-size: 0.9rem;
}
.el-dialog--center .el-dialog__body {
  padding: 0;
}
</style>